import React, { useEffect } from 'react';
import { Spin, Icon, Popover } from 'antd';
import PropTypes from 'prop-types';
import MyECharts from '@components/my-echarts';
import _ from 'lodash';
import './index.less';

const Thrend = props => {
  const { title, dates = [], data = [], loading = false, clickEvent = '', flag = '' } = props;
  let max = 0;
  if (Array.isArray(data)) {
    data.forEach(dataItem => {
      max = Math.max(max, ..._.get(dataItem, 'data', []));
    });
  }
  let paddingLeft = 15 + max.toString().length * 7;

  const legendDates = data.map(({ name, color }) => ({
    name,
    textStyle: {
      color
    },
    icon: 'circle'
  }));

  useEffect(() => {
    if (document.getElementById(`${flag}-thrend-range-left`) && Array.isArray(dates) && dates[0]) {
      document.getElementById(`${flag}-thrend-range-left`).innerHTML = dates[0];
    }
    if (
      document.getElementById(`${flag}-thrend-range-right`) &&
      Array.isArray(dates) &&
      dates[dates.length - 1]
    ) {
      document.getElementById(`${flag}-thrend-range-right`).innerHTML = dates[dates.length - 1];
    }
  }, [dates]);

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '5%',
      left: paddingLeft,
      right: '20',
      bottom: '90',
      borderColor: '#ff0000',
      containLabel: false
    },

    xAxis: {
      type: 'category',
      axisTick: false,
      axisLabel: false,
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#E6EAEF'
        }
      },
      data: dates
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: {
          color: '#E6EAEF'
        }
      },
      axisLabel: {
        color: '#686C78',
        formatter: value => {
          if (Number(value) % 1 !== 0) {
            return null;
          }
          return value;
        }
      }
    },
    dataZoom: {
      type: 'slider',
      bottom: '45',
      labelFormatter: ''
    },
    legend: {
      bottom: '10',
      itemHeight: 6,
      itemWidth: 6,
      data: legendDates
    },
    axisPointer: {
      lineStyle: {
        color: '#1990FE',
        type: 'dashed'
      }
    },
    series: data.map(item => {
      item.type = 'line';

      item.areaStyle = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: '#ffffff'
            },
            {
              offset: 0,
              color: item.color
            }
          ]
        }
      };
      return item;
    })
  };
  let events = {
    datazoom: (params, chart) => {
      if (chart && typeof chart.getOption === 'function') {
        let xAxis = _.get(chart.getOption(), 'xAxis[0]', {});
        let data = xAxis.data || [];
        let start = xAxis.rangeStart || 0;
        let end = xAxis.rangeEnd || data.length - 1;
        document.getElementById(`${flag}-thrend-range-left`).innerHTML = data[start] || '';
        document.getElementById(`${flag}-thrend-range-right`).innerHTML = data[end] || '';
      }
    }
  };
  return (
    <div className="aa-c-thrend">
      <div className="thrend__title">
        {title}&nbsp;
        {flag !== 'oneday_thrend' && (
          <Popover content="每天01：00触发一次统计">
            <Icon type="info-circle" />
          </Popover>
        )}
      </div>
      <Spin tip="加载中" spinning={loading} wrapperClassName="spin-wrapper">
        {clickEvent ? (
          <MyECharts
            option={option}
            className="thrend__chart"
            onClick={clickEvent}
            events={events}
          />
        ) : (
          <MyECharts option={option} className="thrend__chart" events={events} />
        )}
      </Spin>
      {!loading && (
        <span
          id={`${flag}-thrend-range-left`}
          className="thrend-range-left"
          style={{ left: paddingLeft + 24 }}
        />
      )}
      {!loading && <span id={`${flag}-thrend-range-right`} className="thrend-range-right" />}
    </div>
  );
};

Thrend.propTypes = {
  title: PropTypes.string,
  dates: PropTypes.array,
  loading: PropTypes.bool,
  clickEvent: PropTypes.func,
  flag: PropTypes.string,
  data: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string,
      color: PropTypes.string,
      data: PropTypes.array
    })
  )
};

export default Thrend;
